<template>
<!-- 组队 -->
  <view class="zudui">
    <view class="zuHead">
    <!-- 状态3 已分组头 -->
      <view class="zuopa">
        <view class="zuwrap" v-if="teamType=='3'">
          <view class="zuul" :style="{width:ulwidth+'rpx'}">
            <view :class="zushu.index == index ?'zuli act':'zuli'" 
              v-for="(item , index) in zuData" 
              :key="index"
              :data-opt="'ss_'+index"
              @click="totop($event,index)"
              >
              <text>{{item.code}}组</text>
              <view>{{item.actEventTeamDtos.length}}队</view>
            </view>
          </view>
        </view>
        <!-- <view class="inshadow1"></view> -->
        <view class="inshadow2"></view>
      </view>
      <view class="tishi" v-if="showFlag">
				<view class="tishi_player">
					<text>以下球员级别均为{{clubName}}认证的活动级别</text>
					<view class="tishi_player_btn" @click="know">
						知道了
					</view>
				</view>
      </view>
    </view>
    <!-- 状态1 还没有分队 -->
    <view v-if="teamType=='1'" class="memwrap pad400">
      <view class="tithead">
        <text>报名成员</text>
        <view class="right">
          <text>{{appointList.length　}}</text>人
        </view>
      </view>
      <view class="itemcon" >
        <mem-con class="marleft" v-for="(item,index) in appointList" :key="index" :memData="item"></mem-con>
      </view>
  </view>
  <!-- 状态2 分队 -->
  <view v-if="teamType=='2'" class="memwrap2">
    <view v-for="(item , index) in duiData" :key="index" class="memwrap">
      <view class="tithead">
        <text>{{item.code}}</text>
      </view>
      <view class="itemcon">
        <mem-con class="marleft" v-for="(s,i) in item.actEventTeamEnterList" :key="i" :memData="s"></mem-con>
      </view>
      <view class="fenge"></view>
    </view>
  </view>
  <!-- 状态3 已分组-->
  <scroll-view 
    v-if="teamType=='3'"
    :scroll-into-view="scrollToTop"
    scroll-y="true" 
    scroll-with-animation="true"
    :style="{'height':(scrollheight-50)+'px'}"
    >
      <view :id="'ss_'+index" v-for="(item , index) in zuData" :key="index" class="memwrap memwrap3">
        <view class="szi" v-for="(s,i) in item.actEventTeamDtos" :key="s.id">
          <view class="tithead3">
            <text>{{s.code}}</text>
          </view>
          <view class="itemcon">
            <mem-con class="marleft" v-for="(ss,ii) in s.actEventTeamEnterList" :key="ii" :memData="ss"></mem-con>
          </view>
        </view>
        <view class="fenge"></view>
      </view>
  </scroll-view>
  </view>
</template>
<script>
import memCon from './memCon'
import { mapState, mapGetters, mapMutations } from "vuex";
export default {
  data(){
    return{
      teamType:'0',//0空，1默认未分队伍，2已分队未分组，3已分组
      appointList:[],
      dialogonoff:false,
      zushu:{
        onoff:false,//选分组弹窗
        value:0,//分几组
        index:0,//组显示的下标
      },
      duiData:[],//队伍列表
      ulwidth:'',//顶部滑动的宽度
      scrollToTop:'',
      scrollheight:'',
      actId:'',
      zuData:[],//组的数据
      teamStatus:'',//组队是否完成，0，1
      groupStatus:'',//分组是否完成，0，1
			showFlag:true,
			clubName:''//俱乐部名称
    }
  },
  components: {
    memCon: memCon
  },
  onLoad(option){
    this.scrollheight = uni.getSystemInfoSync().windowHeight; //获取可使用的窗口高度
    this.actId = option.actId
		this.clubName=option.clubName
    this.teamStatus = option.teamStatus
    this.groupStatus = option.groupStatus
    // if(option.teamType=='3'){
    //   this.getGroupList();
    // }else{
      
      this.queryActEnterListToUser();//报名人员列表
      if(this.teamStatus == '1'){
        this.queryActEventTeamList();//队伍列表
      }else{
        this.teamType = '1'
      }
      
    // }
    
  },
  computed: {
    ...mapState(["userInfo", "accessToken","sportEventId"])
  },
  methods:{
    async queryActEnterListToUser() {
      //总报名人员列表
      const param = {
        "ACCESS-TOKEN": this.accessToken,
        pageNo: "1",
        pageSize: "99999",
        status: "0",
        actId: this.actId
      };
      const res = await this.$api.queryActEnterListToUser(param);
      if (res && res.code == 200) {
        this.appointList = res.data.list;
        let dataList = res.data.list;
        let bmList = [];
        let hbList = [];
        dataList.forEach((item, ind) => {
          if (item.isBack == "0") {
            bmList.push(item);
          } else {
            hbList.push(item);
          }
        });
        this.appointList = bmList;
      }
    },
    async queryActEventTeamList(){
      //获取队伍列表
      const param = {
        "ACCESS-TOKEN": this.accessToken,
        actId:this.actId,
      }
      const res = await this.$api.queryActEventTeamList(param);
      if(res && res.code == 200){
        if(res.data.length>0){
          this.duiData = res.data
          if(this.sportEventId=='10'){//循环淘汰
            if(this.groupStatus=='1'){
              this.getGroupList()//获取分组
            }else{
              this.teamType = '2'
            }
          }else{
            this.teamType = '2' //单循环单淘汰不用分组actId=1419535014797246464&teamType=3
          }
        }else{
          this.teamType = '1'//没有分队伍
        }
      }else{
        uni.showToast({
          title: res.message,
          icon: "none"
        });
      }
    },
    getGroupList(){
      //获取分组列表
      this.$api.queryActEventGroupsList({
        "ACCESS-TOKEN": this.accessToken,
        actId:this.actId,
      }).then(res=>{
        if(res && res.code=='200'){
          if(res.data.length>0){
            this.zuData = res.data
            this.ulwidth = res.data.length* 130
            this.teamType = '3'
          }else{
            this.teamType = '2'
          }
        }else{
          uni.showToast({
            title: res.message,
            icon: "none"
          });
          this.teamType = '2'
        }
      })
    },
		know(){
			this.showFlag=false
		},
    totop(e,index){
      //点击头部组
      this.scrollToTop = e.currentTarget.dataset.opt
      this.zushu.index = index
    }
  }
}
</script>
<style lang="scss" scoped>

.zudui {
  // padding-bottom: 150rpx;
  display:flex;
  flex-direction: column;
  align-content:stretch;
  height:100vh;
  overflow: hidden;
  .zuHead{
  }
  .tishi {
    padding: 0 30rpx;
    overflow: hidden;
		.tishi_player{
			background: #EEF5FE;
			color: #999999;
			font-size: 26rpx;
			display: flex;
			padding: 13rpx 15rpx;
			justify-content: space-between;
			border-radius: 15rpx;
			align-items: center;
			>text{
				width: 76%;
			}
			.tishi_player_btn{
				width: 110rpx;
				height: 50rpx;
				line-height: 50rpx;
				font-size: 24rpx;
				background: #FDB42E;
				color: #FFFFFF;
				border-radius: 25rpx;
				text-align: center;
			}
		}
  }
  .memwrap {
    overflow-y: scroll;
    .itemcon {
      display: flex;
      flex-flow: row wrap;
      justify-content: flex-start;
      padding:0 30rpx;
      .marleft {
        margin-left: 13rpx;
        &:nth-child(5n+1) {
          margin-left: 0;
        }
      }
    }
    &:last-child{
      padding-bottom:200rpx;
      .fenge{
        display:none;
      }
    }
  }
  .fenge{
    width:100%;
    height: 15rpx;
    background:#f2f2f2;
  }
  .tithead {
    display: flex;
    justify-content: space-between;
    color: #333;
    margin-bottom: 20rpx;
    padding:30rpx 30rpx 0;
    font-size:32rpx;
    .right {
      font-size: 32rpx;
      >text {
        color: #FDB42E;
      }
    }
  }
  
  .tithead3{
    padding:30rpx;
    padding-left:0;
    >text{
      padding:0 15rpx;
      background:#FDB42E;
      color:#fff;
      line-height:35rpx;
      border-radius: 35rpx;
      font-size:30rpx;
    }
  }
  .memwrap2{
    overflow-y: scroll;
  }
  .szi{
    border-bottom:1px solid #e9e9e9;
    margin: 0 30rpx;
  }
  .memwrap3{
    .itemcon{
      padding:0;
    }
    &:last-child{
      padding-bottom:300rpx;//状态3特殊
    }
    .szi{
        &:last-child{
          border:none;
        }
      }
  }
  .pad400{
    padding-bottom:200rpx;
  }
  .btnwrap {
    position: fixed; // width:100%;
    padding: 0 30rpx;
    bottom: 80rpx;
    left: 0;
    >view {
      width: 690rpx;
      height: 88rpx;
      background: #2E87FF;
      color: #fff;
      text-align: center;
      line-height: 88rpx;
      border-radius: 88rpx;
    }
  }
  .select {
    width: 208rpx;
    height: 78rpx;
    padding: 0 20rpx;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 15rpx;
    line-height: 78rpx;
    background-color: #fff;
    display: flex;
    justify-content: space-between; // margin-bottom:20rpx;
  }
  .zu_wrap{
    width:100%;
    position: relative;
    padding-top:50rpx;
    height:290rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    .zushu{
      width:100%;
      >text{
        display:block;
        text-align: center;
        font-size: 32rpx;
        line-height:32rpx;
      }
      .zuyuan{
        display: flex;
        justify-content: center;
        align-items: center;
        height:180rpx;
        .a{
          width:88rpx;
          height:88rpx;
          border:5rpx solid #e9e9e9;
          border-radius: 88rpx;
          text-align: center;
          line-height:88rpx;
          margin:0 45rpx;
          color:#333;
          font-size:30rpx;
          &.act{
            border:5rpx solid #4490FF;
            color:#4490FF;
          }
        }
        
      }
    }
  }
  .zuopa{
    position: relative;
    // .inshadow1{
    //   width:50rpx;
    //   height:100%;
    //   position: absolute;
    //   left: 0;
    //   top:0;
    //   background: linear-gradient(to left, rgba(255,255,255,0) 0%,  rgba(255,255,255,1) 100%);
    // }
    .inshadow2{
      width:80rpx;
      height:100%;
      position: absolute;
      right: 0;
      top:0;
      background: linear-gradient(to right, rgba(255,255,255,0) 0%,  rgba(255,255,255,1) 100%);
    }
  }
  .zuwrap{
    width:100%;
    overflow-x: scroll;
    position: relative;
    // box-shadow: 0 0 20rpx 20rpx #ccc inset;
    // background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 35%, rgba(255,255,255,0) 100%);
    
    .zuul{
      overflow: hidden;
      margin-bottom:20rpx;
      display: flex;
      // justify-content: space-between;
      min-width: 750rpx;
      padding:0 30rpx;
      .zuli {
        width: 100rpx;
        margin-right:30rpx;
        >text {
          font-size: 36rpx;
          color: #333;
          display: block;
          text-align: center;
        }
        >view {
          font-size: 24rpx;
          color: #ccc;
          text-align: center;
          background-color:#fff;
          border-radius: 35rpx;
        }
        &.act {
          >text {
            color: #2E87FF;
          }
          >view {
            color: #fff;
            background-color:#2E87FF;
          }
        }
      }

    }
  }
}

  
</style>
<style>
  .xiala .van-transition{
      z-index: 4000!important;
  }
</style>


